<script setup>
import { ArrowDown, QuestionFilled } from '@element-plus/icons-vue'
import { NOOP } from '@/utils'

const props = defineProps({
  title: String,
  actions: Array,
  inline: Boolean
})

const slots = defineSlots()

function showSubactions() {}
</script>

<template>
  <el-card shadow="never">
    <template v-if="slots.header || props.title" #header>
      <slot name="header">
        {{ props.title }}
      </slot>
    </template>
    <div :class="props.inline ? 'flex' : ''">
      <slot></slot>

      <slot name="form"></slot>

      <slot name="actions">
        <ul class="flex flex-row flex-wrap gap-2">
          <li
            v-for="item in props.actions.filter(action => !action.hide) ?? []"
            :key="item.label + item.type"
          >
            <el-button
              v-if="!item.children"
              :type="item.type"
              @click="item.click?.() ?? item.children ? showSubactions : NOOP"
            >
              {{ item.label }}
              <el-tooltip
                v-if="item.tooltip"
                effect="light"
                :content="item.tooltip"
                placement="top-start"
              >
                <el-icon class="ml-1"><QuestionFilled /></el-icon>
              </el-tooltip>
            </el-button>
            <el-dropdown
              v-else
              trigger="hover"
              @command="
                command =>
                  item.click?.(command) ?? item.command?.(command) ?? NOOP
              "
            >
              <el-button :type="item.type">
                {{ item.label }}
                <el-icon class="ml-1"><arrow-down /></el-icon>
              </el-button>

              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    v-for="child in item.children"
                    :key="child.label + child.type"
                    :command="child.command"
                  >
                    {{ child.label }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </li>
        </ul>
      </slot>
    </div>
  </el-card>
</template>
